<!--
  组件中各参数定义
  一、tasks
  参数描述: 主体显示的任务数据
  示例: tasks = {
    data: { id: 1, text: 'Task #1', start_date: '15-04-2017', duration: 3, progress: 0.6 },
    links: { id: 1, source: 1, target: 2, type: '0' }
  }
  ● data - 定义甘特图中的任务
    ○ id - (string, number)任务id
    ○ start_date - (Date)任务开始日期
    ○ text - (string)任务描述
    ○ progress - (number) 任务完成度，0到1
    ○ duration - (number) 在当前时间刻度下的任务持续周期
    ○ parent - (number) 父任务的id
  ● links - 定义甘特图中的任务关联线
    ○ id - (string, number) 关联线id
    ○ source - (number) 数据源任务的id
    ○ target - (number) 目标源任务的id
    ○ type-(number) 关联线类型：0-'结束到开始'，1-'开始到开始'，2-'结束到结束'
  二、 options
  参数描述: 甘特图配置数据
    ○ scaleUnit - (string) 标度单位(以天或月或年显示)
    ○ dateScale - (string) 标度单位展示类型(eg: '%m-%d' 12-31 scaleUnit不同则dateScale的取值不同)
    ○ scaleHeight - (int)  时间轴上标度单位单元格的高度
    ○ rowHeight - (int)    表格的行高度
    ○ columns - (Array)    表格的列显示(eg: [ { name: 'text',  // 自定义字段名 label: '任务名称',  // 用于界面展示的名称 width: '200', // 为*是自适应宽度 } ])
-->
<template>
  <div ref="gantt" />
</template>

<script>
import gantt from 'dhtmlx-gantt'
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'
import 'dhtmlx-gantt/codebase/locale/locale_cn'
export default {
  name: 'DhtmlxGantt',
  props: {
    // 数据源
    tasks: {
      type: Object,
      default() {
        return {
          data: [],
          links: []
        }
      }
    },
    // 配置源
    options: {
      type: Object,
      default() {
        return {
          scaleUnit: '',
          dateScale: '',
          scaleHeight: 0,
          rowHeight: 0,
          columns: []
        }
      }
    }
  },
  mounted() {
    // 监听任务变化事件
    this.initEvents()
    // 初始化配置
    this.initConfig(this.$props.options)
    // 初始化
    gantt.init(this.$refs.gantt)
    // 数据解析
    gantt.parse(this.$props.tasks)
    console.info(gantt)
  },
  methods: {
    initConfig(options) {
      gantt.config.scale_unit = options.scaleUnit || 'day'
      gantt.config.date_scale = options.dateScale || '%m-%d'
      gantt.config.scale_height = options.scaleHeight || 60
      gantt.config.row_height = options.rowHeight || 30
      const columns = [
        {
          name: 'text',
          label: '任务名称',
          tree: true,
          width: '280'
        },
        {
          name: 'start_date',
          label: '开始时间',
          align: 'center',
          width: '70'
        },
        {
          name: 'duration',
          label: '预计时间',
          align: 'center',
          width: '70'
        },
        {
          name: 'personName',
          label: '指派人',
          align: 'center',
          width: '70'
        },
        {
          name: 'add'
        }
      ]
      // 初始化左侧列数据
      gantt.config.columns = options.columns.length > 0 ? options.columns : columns
      const personOpts = [
        { key: '张总', label: '张总' },
        { key: '李总', label: '李总' },
        { key: '赵总', label: '赵总' }
      ]
      gantt.config.lightbox.sections = [
        { name: 'taskName', height: 70, map_to: 'text', type: 'textarea', focus: true },
        { name: 'personName', height: 30, map_to: 'personName', type: 'select', options: personOpts },
        { name: 'time', height: 50, map_to: 'auto', type: 'duration' }
      ]
      gantt.locale.labels.new_task = '新任务'
      gantt.locale.labels.section_taskName = '任务名称'
      gantt.locale.labels.section_personName = '指派人'
      // 设置进度条上文字
      gantt.templates.task_text = function(start, end, task) {
        if (task.progress !== 0) {
          return Math.floor(task.progress * 100 * 100) / 100 + '%'
        } else {
          return ''
        }
      }
      // 在时间线上增加一行年份显示
      gantt.config.subscales = [
        {
          unit: 'year',
          step: 1,
          date: '%Y'
        }
      ]
    },
    initEvents: function() {
      if (gantt.$_eventsInitialized) {
        return
      }
      // 任务选择后回调
      gantt.attachEvent('onTaskSelected', (id) => {
        const task = gantt.getTask(id)
        this.$emit('task-selected', task)
      })
      // 任务添加后回调
      gantt.attachEvent('onAfterTaskAdd', (id, task) => {
        this.$emit('task-updated', id, 'inserted', task)
        task.progress = task.progress || 0
        if (gantt.getSelectedId() === id) {
          this.$emit('task-selected', task)
        }
      })
      // 任务编辑后回调
      gantt.attachEvent('onAfterTaskUpdate', (id, task) => {
        this.$emit('task-updated', id, 'updated', task)
      })
      // 任务删除后回调
      gantt.attachEvent('onAfterTaskDelete', (id) => {
        this.$emit('task-updated', id, 'deleted')
        if (!gantt.getSelectedId()) {
          this.$emit('task-selected', null)
        }
      })
      gantt.attachEvent('onAfterLinkAdd', (id, link) => {
        this.$emit('link-updated', id, 'inserted', link)
      })
      gantt.attachEvent('onAfterLinkUpdate', (id, link) => {
        this.$emit('link-updated', id, 'updated', link)
      })
      gantt.attachEvent('onAfterLinkDelete', (id, link) => {
        this.$emit('link-updated', id, 'deleted')
      })
      gantt.$_eventsInitialized = true
    }
  }
}
</script>

<style>
</style>
